<template>
  <div class="my_bgbox">
    <Header />
    <Right />
    <div class="zoon"></div>
    <div class="crumb">
      <span>全部房产</span> >
      <span>详情页</span>
    </div>
    <div class="my_box">
      <div class="my_left">
        <div class="my_portrait">
          <p>
            <img :src="img" alt v-if="img" />
            <img src="../../assets/img/tx.png" alt v-else />
          </p>
          <p class="phone">{{ input1 }}</p>
          <p class="welcome">欢迎您~</p>
        </div>
        <div class="my_list">
          <p
            v-for="(item, index) in left_list"
            :key="index"
            :class="[item.name == name ? 'lion' : '']"
            @click="(name = item.name), Onlist(item.name)"
          >
            <img :src="item.img" alt class="left_icon" />
            <span>{{ item.name }}</span>
            <img src="../../assets/img/jr.png" alt class="right_icon" />
          </p>
        </div>
      </div>
      <div class="my_right">
        <p class="my_title">{{ name }}</p>
        <div>
          <div class="tab" v-if="textshow">
            <div class="tab_box">
              <div v-for="(item, index) in tabList" :key="index" class="tab_detalis">
                <div class="picture">
                  <img :src="item.img[0]" alt v-if="item.img" @click="onDetails(item.id)" />
                  <img src="../../assets/img/demo.png" alt v-else />
                  <img
                    v-if="name == '我的关注'||name == '我的足迹'"
                    src="../../assets/img/delete.png"
                    @click="Onfollow(item)"
                    class="heart"
                  />
                  <p class="soon">即将拍卖</p>
                  <p class="time" v-if="item.startSaleTimeStr">开拍时间：{{ item.startSaleTimeStr }}</p>
                  <p class="time" v-else>开拍时间待定</p>
                </div>

                <div class="details_conter" @click="onDetails(item.id)">
                  <p class="address">{{ item.title }}</p>
                  <p class="details">
                    {{ item.bedRoomCount }}室{{ item.visitorRoomCount }}厅
                    <span
                      v-if=" item.coveredArea"
                    >·{{ item.coveredArea }}㎡</span>
                    <span v-if=" item.directionName">· {{ item.directionName }}</span>
                  </p>
                  <p class="price">
                    市场价：
                    <span v-if="item.marketSalePrice">
                      {{
                      item.marketSalePrice
                      }}
                    </span>
                    <span v-else>--</span>万
                  </p>
                  <div class="startPrice">
                    <p class="start">
                      起拍价：
                      <span v-if="item.startSalePrice">{{ item.startSalePrice }}万</span>
                      <span v-else>--</span>
                    </p>
                  </div>
                </div>
              </div>
            </div>

            <div class="block">
              <el-pagination
                layout="prev, pager, next"
                :total="total"
                :page-size="9"
                @current-change="handleCurrentChange"
              ></el-pagination>
            </div>
          </div>
          <div v-else class="set_up">
            <el-upload
              class="avatar-uploader"
              :show-file-list="false"
              action
              :http-request="beforeAvatarUpload"
              :on-change="fileChange"
            >
              <img :src="img" alt class="modify" v-if="img" />
              <img src="../../assets/img/tx.png" alt class="modify" v-else />
              <!-- <i v-else class="el-icon-plus avatar-uploader-icon"></i> -->
            </el-upload>
            <!-- <img src="../../assets/img/tx.png" alt class="modify" /> -->
            <div class="demo-input-suffix">
              <span class="demonstration">昵称</span>
              <el-input placeholder="请输入昵称" v-model="input1"></el-input>
            </div>
            <div class="demo-input-suffix">
              <span class="demonstration">生日</span>
              <el-date-picker
                v-model="value1"
                type="date"
                placeholder="选择日期"
                value-format="yyyy-MM-dd"
              ></el-date-picker>
              <p class="btn" @click="Onkeep">保存</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <Footer />
  </div>
</template>
<script>
import Header from "@/components/pc_file/header.vue";
import Footer from "@/components/pc_file/footer.vue";
import Right from "@/components/pc_file/right.vue";
export default {
  data() {
    return {
      img: "",
      tabList: [],
      left_list: [
        { name: "我的足迹", img: require(`@/assets/img/wdzj.png`) },
        { name: "我的关注", img: require(`@/assets/img/wdgz1.png`) },
        { name: "我的订阅", img: require(`@/assets/img/wddy.png`) },
        { name: "拍卖提醒", img: require(`@/assets/img/pmtx.png`) },
        { name: "设置资料", img: require(`@/assets/img/szzl.png`) }
      ],
      name: "",
      value1: "",
      input1: "",
      page: 1,
      total: 1,
      file: "",
      textshow: true,
      userId: sessionStorage.getItem("userId"),
      text: "",
      uploadImg: null
    };
  },
  watch: {
    $route() {
      console.log(this.$route.query);
      this.setTab();
      this.OngetPersonalInfo();
      this.Onlist();
    }
  },
  mounted() {
    this.setTab();
    this.OngetPersonalInfo();
    this.Onlist();
  },
  methods: {
    setTab() {
      this.text = this.$route.query.id;
      if (this.text == "1") {
        this.name = "我的足迹";
      } else if (this.text == "2") {
        this.name = "我的关注";
      } else if (this.text == "3") {
        this.name = "我的订阅";
      } else if (this.text == "4") {
        this.name = "拍卖提醒";
      } else if (this.text == "5") {
        this.name = "设置资料";
      }
    },
    OngetPersonalInfo() {
      this.userId = sessionStorage.getItem("userId");
      this.instance
        .getPersonalInfo({
          id: this.userId
        })
        .then(res => {
          this.input1 = res.data.data.petName;
          this.value1 = res.data.data.birthday;
          this.img = res.data.data.headUrl;
        })
        .catch(function(error) {});
    },
    Onkeep() {
      const that = this;
      const form = new FormData();
      if (that.uploadImg) {
        form.append("headFile", that.uploadImg);
      }
      form.append("userId", Number(that.userId));
      form.append("petName", that.input1);
      form.append("birthday", that.value1);
      that.instance
        .modifyPersonalInfo(form)
        .then(res => {
          that.$message({
            message: "保存成功",
            type: "success"
          });
        })
        .catch(function(error) {});
    },
    fileChange(file) {
      this.img = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload(file) {
      console.log(file);
      const isJPG = file.file.type === "image/jpeg" || "image/jpg";
      const isLt2M = file.file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.img = "";
        this.$message.error("上传头像图片只能是 JPG 格式!");
        return;
      }
      if (!isLt2M) {
        this.img = "";
        this.$message.error("上传头像图片大小不能超过 2MB!");
        return;
      }
      this.uploadImg = file.file;
    },
    onDetails(item) {
      this.$router.push({ name: "Details", query: { id: item } });
      this.stopBubbling(event);
    },
    stopBubbling(e) {
      e = window.event || e;
      if (e.stopPropagation) {
        e.stopPropagation(); //阻止事件 冒泡传播
      } else {
        e.cancelBubble = true; //ie兼容
      }
    },
    Onfollow(val) {
      if (this.name == "我的关注") {
        this.instance
          .cancelHouseFollow({
            id: val.id
          })
          .then(res => {
            if (res.data.code == "0") {
              this.tabList = [];
              this.OnhouseFollow();
            }
          })
          .catch(function(error) {});
      } else if (this.name == "我的足迹") {
        this.instance
          .cancelHouseBrowse({
            houseId: val.id,
            userId: Number(this.userId)
          })
          .then(res => {
            if (res.data.code == "0") {
              this.tabList = [];
              this.OngetList();
            }
          })
          .catch(function(error) {});
      }
    },
    Onlist() {
      if (this.name == "我的足迹") {
        this.tabList = [];
        this.textshow = true;
        this.OngetList();
        this.$router.push({ name: "my", query: { id: "1" } });
      } else if (this.name == "我的关注") {
        this.tabList = [];
        this.textshow = true;
        this.OnhouseFollow();
        this.$router.push({ name: "my", query: { id: "2" } });
      } else if (this.name == "我的订阅") {
        this.tabList = [];
        this.textshow = true;
        this.OnmySubscribe();
        this.$router.push({ name: "my", query: { id: "3" } });
      } else if (this.name == "拍卖提醒") {
        this.tabList = [];
        this.textshow = true;
        this.OngetRemind();
        this.$router.push({ name: "my", query: { id: "4" } });
      } else if (this.name == "设置资料") {
        this.textshow = false;
        this.$router.push({ name: "my", query: { id: "5" } });
      }
    },
    handleCurrentChange(val) {
      this.page = val;
      this.Onlist();
    },
    OnmySubscribe() {
      this.instance
        .mySubscribe({
          telephone: sessionStorage.getItem("photo"),
          page: this.page,
          limit: 9
        })
        .then(res => {
          if (res.data.code == 0) {
            this.tabList = res.data.data;
            this.tabList.forEach((item, index) => {
              if (item.imgUrl) {
                item.img = item.imgUrl.split(",");
              }
            });
          }
        })
        .catch(function(error) {});
    },
    OngetList() {
      this.instance
        .getList({
          page: this.page,
          limit: 9
        })
        .then(res => {
          if (res.data.code == 0) {
            this.tabList = res.data.data;
            this.tabList.forEach((item, index) => {
              if (item.imgUrl) {
                item.img = item.imgUrl.split(",");
              }
            });
          }
        })
        .catch(function(error) {});
    },
    OnhouseFollow() {
      this.instance
        .houseFollow({
          page: this.page,
          limit: 9
        })
        .then(res => {
          if (res.data.code == 0) {
            this.tabList = res.data.data;
            this.tabList.forEach((item, index) => {
              if (item.imgUrl) {
                item.img = item.imgUrl.split(",");
              }
            });
          }
        })
        .catch(function(error) {});
    },
    OngetRemind() {
      this.instance
        .getRemindHouseList({
          page: this.page,
          limit: 9
        })
        .then(res => {
          if (res.data.code == 0) {
            this.tabList = res.data.data;
            this.tabList.forEach((item, index) => {
              if (item.imgUrl) {
                item.img = item.imgUrl.split(",");
              }
            });
          }
        })
        .catch(function(error) {});
    }
  },
  computed: {
    headers() {
      return {
        "Content-Type": "application/json",
        "OPEN-HEAD-KEY": "f372ec2c-aa0e-4caa-a74c-691da1272655",
        VueType: "vue",
        Authorization: sessionStorage.getItem("token")
      };
    }
  },
  components: {
    Header,
    Footer,
    Right
  }
};
</script>
<style lang="less" scoped>
.my_bgbox {
  background: #fbfbfb;
  .zoon {
    height: 80px;
  }
  .crumb {
    width: 1200px;
    margin: 0 auto;
    padding: 30px 0px;
    color: #999999;
    font-size: 14px;
  }
  .my_box {
    .block {
      text-align: center;
    }
    display: flex;
    width: 1200px;
    margin: 0 auto;
    .my_left {
      width: 222px;
      margin-right: 22px;
      .my_portrait {
        width: 222px;
        height: 190px;
        background: #ffffff;
        border-radius: 6px;
        text-align: center;
        padding-top: 32px;
        img {
          width: 90px;
          height: 90px;
        }
        .phone {
          font-size: 18px;
          margin: 10px 0;
        }
        .welcome {
          font-size: 14px;
          color: #9a9a9a;
        }
      }
      .my_list {
        cursor: pointer;
        margin-top: 18px;
        height: 287px;
        background: #ffffff;
        border-radius: 6px;
        .lion {
          border-left: 3px solid #f58058;
        }
        p {
          position: relative;
          height: 58px;
          line-height: 58px;
          font-size: 14px;
          color: #343434;
          text-align: center;

          .right_icon {
            position: absolute;
            right: 20px;
            top: 40%;
          }
          .left_icon {
            position: absolute;
            left: 30px;
            top: 40%;
          }
        }
      }
    }
    .my_right {
      cursor: pointer;
      .my_title {
        width: 936px;
        height: 68px;
        background: #ffffff;
        border-radius: 6px;

        font-size: 14px;
        color: #343434;
        line-height: 68px;
        padding-left: 20px;
      }
    }
    .tab {
      padding: 40px 0;
      .tab_box {
        overflow: hidden;
      }
      .tab_detalis:last-child {
        margin-right: 0px;
      }
      .tab_list:last-child {
        margin-right: 0px;
      }
      .tab_list {
        width: 33.33%;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 16px;
        margin-right: 30px;
      }
      .tab_detalis {
        margin-right: 30px;
        margin-left: 12px;
        width: 276px;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 16px;
        float: left;
        margin-bottom: 20px;
        background: #fff;
      }
      img {
        width: 100%;
        height: 214px;
        border-radius: 6px;
        position: relative;
      }
      .address {
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        margin: 34px 0 11px 0;
        font-weight: bold;
        color: #333;
      }
      .details {
        color: #656565;
      }
      .price {
        color: #656967;
        margin: 20px 0 19px 0;
      }
      .startPrice {
        overflow: hidden;
        .start {
          float: left;
          font-weight: bold;
          color: #333;
          margin: 0;
          span {
            color: #d91515;
          }
        }
        .btn {
          float: right;
          background: linear-gradient(0deg, #ef7f00, #ef7d01);
          border-radius: 6px;
          width: 64px;
          height: 32px;
          line-height: 32px;
          font-size: 14px;
          color: #fff;
          text-align: center;
        }
      }
    }
    .set_up {
      margin-top: 20px;
      width: 955px;
      height: 400px;
      background: #ffffff;
      border-radius: 6px;
      text-align: center;
      padding: 53px 0;
      .modify {
        width: 120px;
        height: 120px;
        border-radius: 50%;
      }
      .btn {
        width: 308px;
        height: 49px;
        background: #f58058;
        border-radius: 6px;
        margin: 0 auto;
        color: #fff;
        line-height: 49px;
        margin-top: 20px;
      }
    }
    .picture {
      position: relative;
      text-align: center;
      .rebate {
        width: 38px;
        height: 43px;
        background: url("~@/assets/img/zk.png") no-repeat;
        position: absolute;
        top: -5px;
        right: 20px;
        line-height: 43px;

        font-size: 12px;
        color: #fff;
      }
      .heart {
        position: absolute;
        right: 20px;
        top: 20px;
        width: 20px;
        height: 20px;
      }
      .soon {
        position: absolute;
        top: 0;
        width: 89px;
        height: 31px;
        background: linear-gradient(0deg, #19aa6b, #3cd6a2, #3cd8a4);
        border-radius: 6px 0px 6px 0px;
        line-height: 31px;
        color: #fff;
        font-size: 14px;
      }
      .time {
        position: absolute;
        top: 200px;
        left: 25px;
        width: 226px;
        height: 33px;
        background: #ffffff;
        box-shadow: 0px 3px 7px 0px rgba(0, 0, 0, 0.05);
        border-radius: 17px;
        font-size: 14px;
        line-height: 33px;
      }
      .camera {
        position: absolute;
        right: 15px;
        top: 160px;
        text-align: right;
        .start {
          font-size: 12px;
          color: #fff;
        }
        .hour {
          color: #fa6c5b;
          font-size: 16px;
        }
      }
    }
    .details_conter {
      margin-left: 20px;
      margin-bottom: 20px;
    }
  }
}
</style>
<style>
.set_up > .demo-input-suffix > .el-input {
  width: 401px;
  height: 49px;
  margin-top: 20px;
}
.set_up > .demo-input-suffix > .demonstration {
  font-size: 16px;
  color: #9a9a9a;
  margin-right: 20px;
}
</style>
